<template>
  <el-row>
    <el-col>
      上传文件:
    </el-col>
    <el-col>
    <el-upload
        action="http://localhost:8080/excel/gen/"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :on-success="handleSuccess"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    </el-col>
    <el-col>
      <el-input
          v-show="sql.length>0"
          type="textarea"
          :rows="24"
          placeholder="请输入内容"
          v-model="sql">
      </el-input>
    </el-col>
    <el-col>
      <el-button @click="exportText">下载sql文件</el-button>
    </el-col>
  </el-row>
</template>
<script>
module.exports = {
  data: function() {
    return {
      path: '',
      dialogImageUrl: '',
      dialogVisible: false,
      sql: '',
    }
  },
  methods:{
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleSuccess(response){
      this.sql = response
    },
    exportText () {
      const name = "generator.sql";
      const element = document.createElement('a')
      element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(this.sql))
      element.setAttribute('download', name)
      element.style.display = 'none'
      element.click()
    },
  }
}
</script>

<style>
.hello {
  background-color: #ffe;
}
</style>
